
<template>
  
<div class='clearfix'>
      <!-- 标题 -->
     <el-input
  placeholder="请输入标题"
  v-model="title"
  clearable
  class="title"
   maxlength="20"
  show-word-limit
  >
</el-input>
      <!-- 富文本编辑框 -->
      <div id="div1"
        ></div>
        
      <!-- 提交按钮 -->
      <el-button type="primary"
                 @click="changearticle"
                 class='submit'>确认更新</el-button>
                 <!-- 文本框隐藏 -->
<div>
  <textarea  style="width:200px; height:200px;" hidden v-model="content"></textarea>
</div>

        
</div>
</template>
<script>
import wangEditor from 'wangeditor';

export default {
name:"editarticle",
  data () {
    return {
     title:'',
     content:"",
     time:"",
     editid:"",
     authorimg:"",
     editor :null,
    //  author:""
    }
  },

  mounted () {
   
    const editor = new wangEditor(`#div1`)
    editor.config.height = 500;
    editor.config.onchange = (newHtml) => {
       this.content = newHtml;
    }
    // 创建编辑器
    editor.create()
    this.editor = editor;   
   
  },
 created(){
   
   this.editid=this.$route.params.editid;
  this.getarticle();
 },
  methods:{
    // 添加文章
changearticle(){

  //console.log(author);//获取存储的用户ID,不需要用户自己填写
 
     let year=new Date().getFullYear();
   
  let month=new Date().getMonth()+1;
  let day=new Date().getDate();
  this.time=year+"-"+month+"-"+day;

this.$axios.post("/app/login/changearticle",{
  title:this.title,
  content:this.content,
  time:this.time,
  id:this.editid
}).then((res)=>{
  console.log(res);
  if(res.data.state==201){
    this.$message.success("更改文章成功")
    this.$router.push("/article")
  }else{
     this.$message.error('上传失败');
  }
})
},
async getarticle(){
    const {data:res}= await  this.$axios.get("/app/login/getDetailarticle",{params:{
    id:this.editid
  }});
    this.title=res[0].title;
    this.content=res[0].content;
this.editor.txt.html(this.content);
}
  },
   beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style scoped>
.title{
  margin-bottom: 20px;
  width: 300px;
}
#div1{
  width: 1100px;
 margin-left: 262px;
}
.submit{
  margin-top: 20px;
}
</style>
